<include file="Core:Public:header" />
<link rel="stylesheet" href="__PUBLIC__/css/treeview/jquery.treeview.css" type="text/css">
<script type="text/javascript" src="__PUBLIC__/js/treeview/jquery.treeview.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/treeview/jquery.treeview.edit.js"></script>
 <script  type="text/javascript" src="__PUBLIC__/js/chart/echarts.js"></script>
 <script src="__PUBLIC__/js/datepicker/WdatePicker.js"></script>
<script type="text/javascript">
	$(function() {
		$("#browser").treeview();
	})
</script>
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}

.tsubmit{
width:70px;height:30px;background-color:#0789cc;border:hidden;
-moz-box-shadow: 2px 2px 1px #909090;
-webkit-box-shadow: 2px 2px 1px #909090;
box-shadow:2px 2px 1px #909090;
border-radius:10px;
font-family:黑体;
font-size:15px;
color:white;
text-align:center;
}
.tsubmit:hover{
	background-color:#055680;
}

.theader{
	width:100%;
	height:40px;
}
.theader ul{
	list-style:none;
	
}
.theader ul li{
	float:left;
	text-align:center;
	line-height:40px;
	width:150px;
	
}
.theader ul a{
	text-decoration:none;
	color:#ffffff;
	font-size:20px;
	font-family:黑体;
	text-shadow:1px 1px 1px dimgray;
	}

.tli{
	background-color:#f3e8e8;
	border-top:1px solid #944949;
	border-left:1px solid #944949;
	border-right:1px solid #944949;
}	


.ebutton{
	width:70px;
	height:25px;
	background-color:#ca7d7d;
	line-height:23px;
	border-radius:6px;
	border:1px solid #964f4f;
	color:#ffffff;
	text-align:center;
}
.ibutton{
	width:70px;
	height:25px;
	background-color:#8c538c;
	line-height:23px;
	border-radius:6px;
	border:1px solid #964f4f;
	color:#ffffff;
	text-align:center;
}
.ibutton:hover{
	background-color:#ecbcec;
}
.look a{
	text-decoration:none;
}
.tsmall{
	width:100%;
	height:50px;
	border:1px solid #AAAAAA;
	background-color:#EEEEE0;
	
}

.tr1{
	border-bottom:1px solid #CCCCCC;
}
.r1{
	border-right:1px solid #CCCCCC;
}
.backg{
	background-color:#9BCD9B;
}
.typeul{
	width:25%;
	height:200px;
	background-color:#D8BFD8;
	border:1px solid #EEEEE0;
	float:left;
	line-height:25px;
}
.tabtime{
	float:left;
	line-height:30px;
	height:30px;
	margin-bottom:50px;
	margin-left:20px;
}
</style>
{:W('Navigation')}

<div class="body-right">
	<div class="row-table">
		<div class="row-table-title"><a href="javascript:history.back()"><<返回</a>营业额图表</div>
	</div>
		<div class="tabtime">当前日期【{$d1|date="Y-m-d H:i",###}至{$d2|date="Y-m-d H:i",###}】</div>
		<div class="tabtime">
			<form action="{:U('chrm/turnover/table')}" method="post">
					    	选择日期:
					    	<input type="text" name="tdate" class="form-control" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value="" style="width:120px;"/>
					    	<input type="hidden" name="form" value="day" />
					    	<input type="submit" value="查询"  class="btn btn-primary" />
			</form>
		</div>
		<div class="tabtime">
			<form action="{:U('chrm/turnover/table')}" method="post">
					    	选择月份:
					    	<input type="text" name="tdate" class="form-control" onclick="WdatePicker({dateFmt:'yyyy-MM'})" value="" style="width:120px;"/>
					    	<input type="hidden" name="form" value="month" />
					    	<input type="submit" value="查询"  class="btn btn-primary" />
			</form>
		</div>
		<div class="tabtime">
			<form action="{:U('chrm/turnover/table')}" method="post">
					    	选择年:
					    	<input type="text" name="tdate" class="form-control" onclick="WdatePicker({dateFmt:'yyyy'})" value="" style="width:120px;"/>
					    	<input type="hidden" name="form" value="year" />
					    	<input type="submit" value="查询"  class="btn btn-primary" />
			</form>
		</div>
	<div id="tab1" >
		
	<div style="width:100%;height:350px;margin-top:50px;background-color:#EAEAEA;">	
		<div id="main1" style="width:100%;height:300px;"> </div>	
<script type="text/javascript">	
	var myChart = echarts.init(document.getElementById('main1'));
	
	option = {
	    title : {
	        text: '营业额图表',
	        subtext: '{$d1|date="Y-m-d H:i",###}至{$d2|date="Y-m-d H:i",###}',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        data: [
	        	<volist name="list['todep']" id="b">
	        		'{$b.depname}',
	        	</volist>
	        ]
	    },
	    series : [
	        {
	            name: '营业额图表',
	            type: 'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:[
		            <volist name="list['todep']" id="b">
		        		 {value:<?php echo $b['sum'];?>, name:'<?php echo $b['depname'];?>'},
		        	</volist>
	            ],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};
	myChart.setOption(option);
</script>
</div>	
		
	<div style="width:100%;height:800px;margin-top:40px;background-color:#EBEBEB;padding-top:10px;">
		
		<h3 style="text-align:center;font-weight:bold;">支出汇总列表</h3>
		<volist name="list['type_list']" id="v">
			<ul class="typeul">
				<li>{$v.parent}</li>
				<volist name="v['child']" id="vo">
					<li>{$vo.name}:<font style="color:#F1F1F1;">{$vo.sum}</font></li>
				</volist>	
			</ul>
		</volist>
		

											<div id="main3" style="width:100%;height:300px;"> </div>
	 <script type="text/javascript">
									    
	// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main3'));																	    
option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['部门支出金额图表'],
    },
    grid: {
        left: '1%',
        right: '1%',
        bottom: '3%',
        containLabel: true
    },
    yAxis:  {
        type: 'value'
    },
    xAxis: {
        type: 'category',
        data: [
       				<volist name="list['exdep']" id="n">
	                	'{$n.depname}',
	                </volist>
        ]
    },
    series: [
    
       {
            name: '部门支出金额图表',
            type: 'bar',
            stack: '总量',  
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [
	                <volist name="list['exdep']" id="n">
	                	{$n.sum},
	                </volist>
				]
       },	
       
    ]
};
myChart.setOption(option);
	</script>	
										
									
							
		
	</div>
	
	
</div>
<div class="clear"></div>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function setblock(n){
	g('tab'+n).className='tabs';
}

    function firm(id)
    {
        if(confirm("你确定要删除吗？"))
        {
           return true;
        }
        else
        {
            return false; 
        }
    }
</script>

<include file="Core:Public:alert" />
<include file="Core:Public:footer" />